<template>
  <div id="app">
    <div class="header-box container" :class="testHeader">
      <div class="header row">
        <div class="col-2"><img src="http://qiniu.prod.fita-club.com/logo.png" alt="" class="logo"></div>
        <div class="menu col-10" style="padding-left: 0;">
          <ul style="display: inline-block; width: 76%; padding-left: 0px;">
            <li class="item">
              <a :href="'http://www.fita-club.'+(domain)+'/index.html'">首页</a>
            </li>
            <li class="item">
              <a href="javascript:void(0);">国际租车</a>
              <div class="submenu text-center">
                <a href="/" class="alink">国际租车</a>
                <!-- <a href="/login" class="alink">代理登录/注册</a> -->
                <a href="/profile" class="alink">我的订单</a>
              </div>
            </li>
            <li class="item">
              <a :href="'http://www.fita-club.'+(domain)+'/hot-line.html'">热门线路</a>
              <div class="submenu text-center">
                <!-- <a href="javascript:void(0);" class="alink">北美租车线路</a>
                <a href="javascript:void(0);" class="alink">斐济岛线路</a>
                <a href="javascript:void(0);" class="alink">邮轮线路</a> -->
              </div>
            </li>
            <li class="item">
              <a href="javascript:void(0);">国际机票</a>
              <div class="submenu text-center">
                <a :href="'http://www.fita-club.'+(domain)+'/american-airport.html'" class="alink">美国航空</a>
                <a :href="'http://www.fita-club.'+(domain)+'/british-airport.html'" class="alink">英国航空</a>
                <a :href="'http://www.fita-club.'+(domain)+'/feiji-airport.html'" class="alink">斐济航空</a>
                <a :href="'http://www.fita-club.'+(domain)+'/iberia-airport.html'" class="alink">西班牙伊比利亚航空</a>
                <a :href="'http://www.fita-club.'+(domain)+'/hawaiian-airport.html'" class="alink">夏威夷航空</a>
              </div>
            </li>
            <li class="item">
              <a href="javascript:void(0);">奢华邮轮</a>
              <div class="submenu text-center">
                <a :href="'http://www.fita-club.'+(domain)+'/holland-america-line.html'" class="alink">荷美邮轮</a>
                <a :href="'http://www.fita-club.'+(domain)+'/seabourn-cruise-line.html'" class="alink">世邦邮轮</a>
                <a :href="'http://www.fita-club.'+(domain)+'/disney-cruise-line.html'" class="alink">迪士尼邮轮</a>
              </div>
            </li>
            <li class="item">
              <a href="javascript:void(0);">目的地</a>
              <div class="submenu text-center">
                <a :href="'http://www.fita-club.'+(domain)+'/dfw-destination.html'" class="alink">达拉斯沃斯堡国际机场</a>
                <!-- <a href="http://fita-club.com/portland-destination.html" class="alink">波特兰旅游局</a>
                <a href="http://fita-club.com/oregon-destination.html" class="alink">俄勒冈旅游局</a> -->
              </div>
            </li>
            <li class="item">
              <a :href="'http://www.fita-club.'+(domain)+'/about-us.html'">关于我们</a>
              <!-- <div class="submenu text-center">
                <a href="javascript:void(0);" class="alink">微信</a>
                <a href="javascript:void(0);" class="alink">微博</a>
              </div> -->
            </li>
          </ul>
          <div class="float-xs-right float-sm-right float-md-right float-lg-right float-xl-right" style="width: 23%;">
            <div class="login-btn-group" v-if="$store.getters.getUserName">
              <a href="javascript:void(0);" style="text-decoration: none;">您好,&nbsp;{{$store.getters.getUserName}}</a>&nbsp;/&nbsp;
              <a href="javascript:void(0);" class="backlogin" v-on:click="logoutFun">登出</a>
            </div>
            <div class="login-btn-group" v-else>
              <router-link :to="{ name: 'login'}">
               登录
              </router-link>&nbsp;/&nbsp;
              <router-link :to="{ name: 'login'}">
               注册
              </router-link>
            </div>
            <!-- <select class="language">
              <option>英文</option>
              <option selected>中文</option>
            </select> -->
          </div>
        </div>
      </div>
    </div>
    <keep-alive>
      <router-view/>
    </keep-alive>
    <div class="footer-layout">
      <div class="footer-box container box-width">
        <div class="row">
          <div class="item text-center ">
            <div class="title">国际租车</div>
            <a href="">爱路美国际租车</a>
            <a href="alamo.html">企业号租车</a>
            <a href="">纳什租车</a>
          </div>
          <div class="item text-center ">
            <div class="title">国际机票</div>
            <a href="american-airport.html">美国航空</a>
            <a href="british-airport.html">英国航空</a>
            <a href="feiji-airport.html">斐济航空</a>
            <a href="iberia-airport.html">西班牙伊比利亚航空</a>
            <a href="hawaiian-airport.html">夏威夷航空</a>
          </div>
          <div class="item text-center ">
            <div class="title">奢华邮轮</div>
            <a href="holland-america-line.html">荷美邮轮</a>
            <a href="seabourn-cruise-line.html">世邦邮轮</a>
            <a href="disney-cruise-line.html">迪士尼邮轮</a>
          </div>
          <div class="item text-center ">
            <div class="title">热门线路</div>
            <a href="">阳光加州</a>
            <a href="">开拓之旅-波特兰</a>
            <a href="">心花怒放-夏威夷</a>
            <a href="">邮轮热门航线</a>
          </div>
          <div class="item text-center ">
            <div class="title">目的地</div>
            <a href="dfw-destination.html">达拉斯沃斯堡国际机场</a>
            <a href="oregon-destination.html">俄勒冈旅游局</a>
            <a href="portland-destination.html">波特兰旅游局</a>
            <a href="">斐济</a>
          </div>
          <div class="item text-center ">
            <div class="title">联系我们</div>
            <a href=""><span class="iconfont icon-wechat"></span>微信</a>
            <a href=""><span class="iconfont icon-weibo"></span>微博</a>
            <a href=""><span class="iconfont icon-feizhu"></span>飞猪</a>
          </div>
          <div class="item text-center qrcode-box">
            <img src="./assets/images/footer-wechat.png" alt="" style="width: 100px;">
            <p class="">微信</p>
            <img src="./assets/images/footer-weibo.png" alt="" style="width: 100px;">
            <p class="">微博</p>
          </div>
        </div>
        <div v-if="$route.name != 'renting'" class="copyright text-center">
          沪ICP备18038258号
        </div>
        <div v-else class="renting-brand-layout">
          <div class="brand-logo clearfix">
            <div class="item">
              <img src="./assets/images/renting-brand-1.png" style="display: block; width: 100%;">
            </div>
            <div class="item">
              <img src="./assets/images/renting-brand-2.png" style="display: block; width: 100%;">
            </div>
            <div class="item">
              <img src="./assets/images/renting-brand-3.png" style="display: block; width: 100%;">
            </div>
            <div class="item">
              <img src="./assets/images/renting-brand-4.png" style="display: block; width: 100%;">
            </div>
            <div class="item">
              <img src="./assets/images/renting-brand-5.png" style="display: block; width: 100%;">
            </div>
            <div class="item">
              <img src="./assets/images/renting-brand-6.png" style="display: block; width: 100%;">
            </div>
            <div class="item">
              <img src="./assets/images/renting-brand-7.png" style="display: block; width: 100%;">
            </div>
            <div class="item">
              <img src="./assets/images/renting-brand-8.png" style="display: block; width: 100%;">
            </div>
            <div class="item">
              <img src="./assets/images/renting-brand-9.png" style="display: block; width: 100%;">
            </div>
            <div class="item">
              <img src="./assets/images/renting-brand-10.png" style="display: block; width: 100%;">
            </div>
            <div class="item">
              <img src="./assets/images/renting-brand-11.png" style="display: block; width: 100%;">
            </div>
            <div class="item">
              <img src="./assets/images/renting-brand-12.png" style="display: block; width: 100%;">
            </div>
            <div class="item">
              <img src="./assets/images/renting-brand-13.png" style="display: block; width: 100%;">
            </div>
          </div>
          <p class="text-center" style="font-size: 18px; color: #3a3a3a; margin: 20px 0;">上海见闻国际旅行社 版权所有 沪ICP备18038258号</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
  .login-btn-group,
  .login-btn-group a {
    text-align: right;
    font-size: 13px;
    color: #a1781e;
 }

.testHeader .menu ul .item a {
  color: #2f92e8!important;
}

</style>
<script>
import http from './utils/http'
import constant from './utils/constant'
import store from './vuex/mobile'
import {delCookie} from './utils/utils'

export default {
  name: 'App',
  data() {
    return {
      logined: this.$store.getters.getMobile,
      userName: null,
      testHeader: undefined,
      domain: 'com'
    }
  },
  mounted() {
    // let that = this
    http.get('/profile', {
      'mobile': this.$store.getters.getMobile
    }, function(response) {
      store.dispatch('setUserName', response.agent.name)
    })
  },
  methods: {
    // 用户登出
    logoutFun() {
      delCookie(constant.mobileCookie)
      store.dispatch('setMobile', null)
      store.dispatch('setUserName', null)
      this.$router.go()
    }
  },
  watch: {
    '$route' (to, from) {
      if (window.location.hostname.lastIndexOf('.cn') > 0) {
        this.testHeader = 'testHeader'
        this.domain = 'cn'
      } else {
        this.testHeader = undefined
        this.domain = 'com'
      }
    }
  }
}

</script>
